<template>
	<div class="view">
		<div class="header">
			<div class="h_left" @click="toUrl('/')">
				<div class="logo">
					<!-- <img src="../assets/image/logo.png" alt=""> -->
				</div>
				<div>青年和大学生就业集市系统管理</div>
			</div>
			<div class="h_right">
				<div class="h_li" @click="toUrl('/ad')">
					<div class="li_icon">
						<i class="i-c-icon11 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">广告管理</div>
				</div>
				<div class="h_li" @click="toUrl('/sort')">
					<div class="li_icon">
						<i class="i-c-icon11 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">目录管理</div>
				</div>
				<div class="h_li" @click="toUrl('/dictionary')">
					<div class="li_icon">
						<i class="i-c-icon11 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">数据字典</div>
				</div>
				<div class="h_li" @click="toUrl('/log')">
					<div class="li_icon">
						<i class="i-c-icon11 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">操作日志</div>
				</div>
				<div class="h_li" @click="toUrl('/configure')">
					<div class="li_icon">
						<i class="i-c-icon12 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">网站配置</div>
				</div>
				<div class="h_li" @click="toUrl('/user')" >
					<div class="li_icon">
						<i class="i-c-icon13 i-16 i-mr-6"></i>
					</div>
					<div class="li_cnt">账号管理</div>
				</div>
				<div class="h_li">
					<el-dropdown @command="doapClick">
						<span class="el-dropdown-link">
							{{userInfo.adminname}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="exit">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>

			</div>
		</div>

		<div class="main" :style="{minHeight:minHeight+'px'}">
			<div class="main_con">
				<div class="main_title">快捷入口</div>
				<div class="cata_box">
					<div class="cata_item" @click="toUrl('/account')">
						<div class="cata_icon">
							<i class="i-menu-icon1 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">用户中心</div>
							<div class="cata_title2">User management</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/seeker')">
						<div class="cata_icon">
							<i class="i-menu-icon2 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">求职者</div>
							<div class="cata_title2">Job seeker</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/company')">
						<div class="cata_icon">
							<i class="i-menu-icon7 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">企业信息</div>
							<div class="cata_title2">Company information</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/info')">
						<div class="cata_icon">
							<i class="i-menu-icon5 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">内容管理</div>
							<div class="cata_title2">Content management</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/recruit')">
						<div class="cata_icon">
							<i class="i-menu-icon3 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">招聘信息</div>
							<div class="cata_title2">Recruitment information</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/job')">
						<div class="cata_icon">
							<i class="i-menu-icon8 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">求职信息</div>
							<div class="cata_title2">Job information</div>
						</div>
					</div>
					<div class="cata_item" @click="toUrl('/insurance')">
						<div class="cata_icon">
							<i class="i-c-icon17 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">保险追踪</div>
							<div class="cata_title2">Insurance tracing</div>
						</div>
					</div>
					
					<!-- <div class="cata_item" @click="toUrl('/feedback')">
						<div class="cata_icon">
							<i class="i-menu-icon8 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">平台咨询</div>
							<div class="cata_title2">Platform consulting</div>
						</div>
					</div> -->
					<!-- <div class="cata_item" @click="toUrl('/server')">
						<div class="cata_icon">
							<i class="i-menu-icon8 i-60 i-mr-10"></i>
						</div>
						<div class="cata_detail">
							<div class="cata_title">服务管理</div>
							<div class="cata_title2">Service management</div>
						</div>
					</div> -->
				</div>
				
				<div class="data_view">
					<div class="data_left">
						<div class="data_left_title">代办事件</div>
						<div class="data_box">
							<div class="data_li" @click="toUrl('/company')">
								<div class="d_li_title">企业资料审核（{{ companyNum }}）</div>
								<div class="d_li_go">
									<el-button @click="toUrl('/company')" type="text">进入<i class="el-icon-arrow-right"></i></el-button>
								</div>
							</div>
							<div class="data_li" @click="toUrl('/recruit')">
								<div class="d_li_title">招聘信息审核（{{ zhaopinNum }}）</div>
								<div class="d_li_go">
									<el-button @click="toUrl('/recruit')" type="text">进入<i class="el-icon-arrow-right"></i></el-button>
								</div>
							</div>
							<div class="data_li" @click="toUrl('/server/weiquan')">
								<div class="d_li_title">维权咨询（{{ weiquanNum }}）</div>
								<div class="d_li_go">
									<el-button @click="toUrl('/server/weiquan')" type="text">进入<i class="el-icon-arrow-right"></i></el-button>
								</div>
							</div>
						</div>
					</div>
					<div class="data_center">
						<div id="center"></div>
					</div>
					<div class="data_right">
						<div class="d_r_li1" @click="toUrl('/server')">
							<div class="d_con">
								<div class="d_r_li_title1">服务中心</div>
								<div class="d_r_li_title2">快捷入口</div>
								<div class="d_r_li_icon">
									<img src="../assets/image/li_icon1.png" alt="">
								</div>
							</div>
						</div>
						<div class="d_r_li2">
							<div class="d_con">
								<div class="d_r_li2_title"><span>{{ accountCompanyNum+accountSeekerNum }}</span>人次</div>
							</div>
						</div>
					</div>
				</div>
				<div class="echart">
					<div id="echarts"></div>
				</div>
			</div>
		</div>
		
		<Footer></Footer>

		<div class="bj1 bj"></div>
		<div class="bj2 bj"></div>

	</div>
</template>

<script>
import Footer from "../components/footer.vue"
import * as echarts from 'echarts'
import {mapState,mapGetters} from "vuex"
	export default {
		components:{Footer},
		data() {
			return {
				height: document.documentElement.clientHeight,
				minHeight: document.documentElement.clientHeight-192,
				data:{},
				
				dayList:[],// 日期列表
				valList:[],// 日期数据
				
				zhuStr:[],// 专业名称
				zhuValue:[],// 专业值
				
				team:"",// 权限角色
				
				user:{},// 角色数据

				companyNum:0,
				zhaopinNum:0,
				weiquanNum:0,
				accountCompanyNum:0,
				accountSeekerNum:0,
				accessLogs:[],
			}
		},
		computed:{
			...mapState(['userInfo']),
			...mapGetters(['isRole'])
		},
		methods: {
			
			doapClick(e){
				if(e=='exit'){
					this.$store.commit("outLogin");
					this.$router.push("/sign")
				}
			},
			
			// 路由跳转
			toUrl(url){
				this.$router.push(url)
			},
			
			getUser(){
				this.$http({
					'method':'get',
					'url':this.$api.adminMy,
				}).then(res =>{
					if(res.data.code==20000){
						this.$store.commit("setUserInfo",res.data.data.detail)
					}
				})
			},

			getInit(){
				let that = this
				this.$http({
					'method':'post',
					'url':this.$api.adminIndex,
				}).then(res =>{
					if(res.data.code==20000){
						that.companyNum = res.data.data.companyNum
						that.zhaopinNum = res.data.data.zhaopinNum
						that.weiquanNum = res.data.data.weiquanNum
						that.accountCompanyNum = res.data.data.accountCompanyNum
						that.accountSeekerNum = res.data.data.accountSeekerNum
						that.accessLogs = res.data.data.assessLogs

						that.zhuStr.push("求职者人数")
						that.zhuStr.push("企业数")
						that.zhuStr.push("求职信息数")
						that.zhuStr.push("招聘信息数")
						
						that.zhuValue.push(res.data.data.accountSeekerNum)
						that.zhuValue.push(res.data.data.accountCompanyNum)
						that.zhuValue.push(res.data.data.qiuzhiCount)
						that.zhuValue.push(res.data.data.zhaopinCount)

						for (let i = that.accessLogs.length - 1; i >= 0; i--) {
							that.dayList.push(that.accessLogs[i].key)
							that.valList.push(that.accessLogs[i].val)  
						}

						setTimeout(function(){
							that.init()
							that.init2()
						},100)
					}
				})
			},
			// 折线图
			init() {
				this.charts = echarts.init(document.getElementById('center'))
				this.charts.setOption({
					legend: {},
					tooltip: {
						trigger: 'axis',
						showContent: false
					},
					dataset: {
						source: [
							this.dayList,
							this.valList
						]
					},
					xAxis: {
						type: 'category',
						"axisLabel": {
							interval: 0
						}
					},
					yAxis: {
						gridIndex: 0,
						type: 'value',
						name: '访问次数/日期',
					},
					grid: {
						top: '20%'
					},
					series: [{
						type: 'line',
						smooth: true,
						seriesLayoutBy: 'row',
						emphasis: {
							focus: 'series'
						},
						label: {
							"textStyle": {
								"fontSize": 16
							}
						},
					}, ],
					tooltip: {

						show: true,
						extraCssText: 'max-width: 200px;white-space:pre-wrap',
						trigger: "item",

						formatter: function(params) {
							// console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
							let firstParams = params.value[0];

							let sndParams = params.value[1];

							return params.dimensionNames[0] + "   " + firstParams + " : " + sndParams;

						},
						"textStyle": {
							"fontSize": 16
						}

					},
				})
			},
			
			// 柱状图
			init2() {
				this.charts = echarts.init(document.getElementById('echarts'))
				this.charts.setOption({
					// legend: {},
					// tooltip: {
					// 	trigger: 'axis',
					// 	showContent: false
					// },
					dataset: {
						source: [
							this.zhuStr,
							this.zhuValue,
						]
					},
					xAxis: {
						type: 'category',
						"axisLabel": {
							interval: 0
						}
					},
					yAxis: {
						gridIndex: 0,
						type: 'value',
						name: '数量/类型',
					},
					grid: {
						top: '20%'
					},
					series: [{
						type: 'bar',
						smooth: true,
						seriesLayoutBy: 'row',
						barWidth: 22,
						emphasis: {
							focus: 'series'
						},
						label: {
							"textStyle": {
								"fontSize": 16
							}
						},
					}, ],
					tooltip: {
			
						show: true,
						extraCssText: 'max-width: 120px;white-space:pre-wrap',
						trigger: "item",
			
						formatter: function(params) {
							// console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
							let firstParams = params.value[0];
			
							let sndParams = params.value[1];
			
							return firstParams + " : " + sndParams;
			
						},
						"textStyle": {
							"fontSize": 16
						}
			
					},
				})
			},
		
		},
		created() {
			if(Object.keys(this.userInfo).length==0){
				this.getUser()
			}
			this.getInit();
		}
	}
</script>

<style scoped>
	@import url("../assets/css/index.css");
</style>
